<template>
  <div class="Recommend_Songs">
    <div class="title">
      <h3>推荐歌单</h3>
      <a @click="toSongSheetsList">更多></a>
    </div>
    <div class="songslist">
      <!-- 每日歌曲推荐 -->
      <div class="li" @click="toSongsList">
        <el-card shadow="hover">
          <span>星期三</span>
          <span>30</span>
        </el-card>
        <div class="name">每日歌曲推荐</div>
      </div>
      <div v-for="(item, index) in musicList" :key="index" class="li" @click="toListPage(item.id)">
        <el-card shadow="hover" body-style="padding: 0">
          <img :src="item.coverImgUrl" />
          <div class="playCount"><i class="el-icon-headset"></i>{{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }}</div>
          <div class="top">{{ item.name }}</div>
          <div class="icon_play">
            <i class="icon el-icon-video-play"></i>
          </div>
        </el-card>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMusicList } from '../../../network/playlist.js'
export default {
  data () {
    return {
      musicList: {}
    }
  },
  methods: {
    getMusicList () {
      getMusicList().then(res => {
        // console.log(res.data)
        if (res.data.code !== 200) return
        this.musicList = res.data.playlists
        // console.log(this.musicList)
      })
    },
    toSongsList () {
      this.$router.push('/Recommend_songs_list')
    },
    toSongSheetsList () {
      this.$router.push('/find_music/rtsongs')
    },
    toListPage (id) {
      this.$router.push('/songs/' + id)
    }
  },
  created () {
    this.getMusicList()
  }
}
</script>

<style lang="less" scoped>
  .Recommend_Songs {
    width: 90%;
    margin: auto;
    box-sizing: border-box;
    .title {
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e1e1e2;
      a {
        cursor: pointer;
      }
    }
    .songslist {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .li {
        width: 18%;
        margin-top: 15px;
        .el-card {
          position: relative;
          width: 100%;
          height: 100px;
          display: flex;
         flex-direction: column;
         height: auto;
         cursor: pointer;
         span {
           margin: auto;
           display: flex;
           flex: 1;
           justify-content: center;
         }
         span:last-child {
           font-size: 80px;
           color: #44aaf8;
           font-weight: 700;
         }
         img {
           width: 100%;
           height: 100%;
           border-radius: 2px;
         }
         .playCount {
           position: absolute;
           top: 0;
           right: 0;
           width: 50%;
           height: 25px;
           color: #fff;
           text-align: right;
           padding-right: 5px;
           background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.4));
           transform: translateY(0);
           transition: transform 0.5s;
         }
         .top {
           position: absolute;
           top: 0;
           width: 100%;
           height: 20%;
           color: #fff;
           font-size: 14px;
           background: rgba(0, 0, 0, 0.6);
           display: flex;
           justify-content: flex-start;
           padding: 5px;
           overflow: hidden;
           transform: translateY(-100%);
           transition: transform 0.5s;
         }
        }
        .el-card:hover .icon_play i {
          font-size: 35px;
        }
        .el-card:hover .top {
          transform: translateY(0);
        }
        .el-card:hover .playCount {
          transform: translateY(-100%);
        }
        .name {
          display: flex;
          justify-content: flex-start;
          margin: 5px 10px;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }
  .icon_play {
    position: absolute;
    bottom: 15px;
    right: 10px;
    i {
      font-size: 0px;
      color: #ebebeb;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
    }
    i:hover {
      background: rgba(0, 0, 0, 0.7);
    }
  }
</style>
